<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue 3 Slot Demo</title>
  <script src="https://unpkg.com/vue@3"></script>
  <style>
    .slot-component {
      margin: 20px;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      width: 300px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="app">
    <!-- 父组件：调用子组件并传递插槽内容 -->
    <slot-component>
      <!-- 默认插槽内容 -->
      <p>这是默认插槽的内容</p>
      
      <!-- 具名插槽内容 -->
      <template #header>
        <h1>这是具名插槽 "header" 的内容</h1>
      </template>
      
      <!-- 作用域插槽内容 -->
      <template #footer="slotProps">
        <p>这是作用域插槽 "footer" 的内容，接收自子组件的数据：{{ slotProps.message }}</p>
      </template>
    </slot-component>
  </div>

  <script>
    // 定义子组件：SlotComponent
    const SlotComponent = {
      template: `
        <div class="slot-component">
          <!-- 默认插槽 -->
          <slot></slot>
          
          <!-- 具名插槽：header -->
          <slot name="header"></slot>
          
          <!-- 具名插槽：footer，传递数据 -->
          <slot name="footer" :message="footerMessage"></slot>
        </div>
      `,
      data() {
        return {
          footerMessage: '这是子组件传递的数据'
        }
      }
    }

    // 创建 Vue 应用
    const app = Vue.createApp({
      components: {
        SlotComponent
      }
    });

    // 挂载到 #app
    app.mount('#app');
  </script>
</body>
</html>